<template>
  <div :class="'ep-s-' + size">
    <a-input-search
      v-model="modelValue"
      :enter-button="text"
      :placeholder="placeholder"
      style="width: 100%"
      :maxLength="maxLength"
      @search="onInputSearch"
      @change="onSearchChange"
      @pressEnter="onPressEnter"
      @focus="onFocus"
    />
  </div>
</template>

<script>
export default {
  name: "epSearch",
  props: {
    value: [Number, String, Boolean, Array],
    placeholder: {
      type: String,
      default: "请输入关键字",
    },
    text: {
      type: String,
      default: "搜索",
    },
    maxLength: {
      type: [Number, String],
      default: 9999,
    },
    // 尺寸 lager,default,small
    size: {
      type: String,
      default: "default",
    },
  },
  data() {
    return {
      modelValue: "",
      bSize: 'default'
    };
  },
  methods: {
    onInputSearch(value) {
      this.$emit("search", value);
    },
    onSearchChange(e) {
      let value = this.modelValue;
      this.$emit("change", value);
      this.$emit("input", value);
    },
    onPressEnter() {
      let value = this.modelValue;
      this.$emit("search", value);
    },
    //获得焦点时回调
    onFocus() {
      this.$emit("focus");
    },
  },
  watch: {
    value(){
      this.modelValue = this.value
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.ep-s-large {
  ::v-deep .ant-input-wrapper {
    .ant-input {
      height: 40px;
      //background: #002a44;
      border: 1px solid #3e9fc8;
      font-size: 16px;
      &:focus {
        box-shadow: none;
      }
    }
    .ant-btn {
      height: 40px;
      //background: #3e9fc8;
      //border: 1px solid #3e9fc8;
      font-size: 16px;
    }
  }
}
.ep-s-default {
  ::v-deep .ant-input-wrapper {
    .ant-input {
      height: 32px;
      //background: #002a44;
      border: 1px solid #3e9fc8;
      &:focus {
        box-shadow: none;
      }
    }
    .ant-btn {
      height: 32px;
      //background: #3e9fc8;
      //border: 1px solid #3e9fc8;
      font-size: 16px;
    }
  }
}
</style>
